<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>充值</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/styleold.css" />
    <script type="text/javascript" src="./script/api.js"></script>
    <script type="text/javascript" src="./script/aui-tab.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <script type="text/javascript" src="./script/aui-slide.js"></script>
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/jquery-3.2.0.js"></script>
    <script type="text/javascript">
        function closeFrame() {
            //  api.setFrameGroupIndex({
            //     name: 'nav',
            //     index: 2,
            //     reload: true,
            // });
            //  var setSele = 'changeSelect();';
            //  api.execScript({
            //     name: 'home',
            //     script: setSele,
            // });

            var setSele = 'randomSwitchBtn(2);';
            api.execScript({
                name: 'root',
                script: setSele,
            });
            api.closeToWin({
                name: 'root'
            });

            api.closeFrame({
                name: 'recharge-top'
            });

            api.closeFrame({
                name: 'sh_bank_recharge'
            });
        };
    </script>
</head>

<body>

    <form id="rechargeForm" action="http://www.big-wealth.com/index.php?ctl=hrb&act=balance" method="post">
        <div class="sh-bank-d">
            <h3>可用余额(元) : <span id="money"></span></h3>
            <ul>
                <input type="hidden" name="bank" id="hideBankName" value="">
                <input type="hidden" name="agent" value="h5">
                <input type="hidden" name="userid" id="userid">
                <li>
                    <div class="aui-col-xs-3">金额</div>
                    <div class="aui-col-xs-5"><input type="number" onkeyup="limitMoney(this);" name="transAmt" id="moneyNum" placeholder="请填写充值金额" maxlength="12" style="height:auto;" value=''>
                        <div class="check" id="checkRecharge"></div>
                    </div>
                    <div class="aui-col-xs-4"></div>
                </li>
            </ul>
        </div>
        <!-- <div style="padding:0.5rem; background:#fff;">充值方式:</div> -->
        <!-- <div>
                <select name="GateBusild" id="GateBusild" onchange="showBankList(this);">
                    <option value="B2C">个人网银</option>
                    <option value="QP">快捷支付</option>
                </select>
            </div> -->
        <div style="padding:0.5rem; background:#fff;">
            充值方式：
            <label style="margin-right:2rem;"><input class="aui-checkbox" type="radio" name="GateBusild" id="GateBusild"  value='B2C'>个人网银</label>
            <label><input class="aui-checkbox" type="radio" name="GateBusild" id="GateBusild" value='QP' checked='checked'>快捷支付</label>

        </div>

        <div class="aui-content aui-margin-b-15" id="hideBankList" style="display:none;">
            <ul class="aui-list aui-list-in">
                <li class="aui-list-item" onclick="openBankList();" id="beforeBank">
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        <div class="aui-list-item-title">请选择银行</div>
                    </div>
                </li>
                <li class="aui-list-item" onclick="openBankList();" id="afterBank">
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        <div class="aui-list-item-title" id='textBankName'> </div>
                    </div>
                </li>
            </ul>
        </div>



        <div class="aui-btn aui-btn-success aui-btn-block aui-btn-sm" onclick="recharge()">确认</div>
        <p style="padding-top:1rem; text-align:center;">您的充值资金将进入您的鄂托克前旗农商行存管账户</p>
        </div>
    </form>
</body>

<script type="text/javascript">
    $(document).ready(function() {
        $('input[type=radio][name=GateBusild]').change(function() {
            var inv = $("input[name='GateBusild']:checked").val();
            if (inv == 'B2C') {
                $('#hideBankList').show();
            } else {
                $('#hideBankList').hide();
            }
        });
    });


    apiready = function() {

        var user_id = $api.getStorage('userid');
        // 给用户id隐藏域赋值
        var userid = document.getElementById("userid");
        userid.value = user_id;
        // 可用余额
        var money = $api.getStorage('money');
        var moneyEle = document.getElementById("money");
        moneyEle.innerHTML = money;

        // 银行
        var bank = $api.getStorage('bank');
        var bankName = $api.getStorage('bankName');
        var user_id = $api.getStorage('userid');

        // 给开户行名称隐藏域赋值
        if (bank) {
            var hideBankName = document.getElementById("hideBankName");
            hideBankName.value = bank;
            var bankNameClass = document.getElementById("textBankName");
            bankNameClass.innerText = bankName;
            $("#beforeBank").hide();
            $("#afterBank").show();
            $api.setStorage('bank', '');
        } else {
            $("#afterBank").hide();
            $("#beforeBank").show();
        }
    }

    // 限制金额只能输入小数后2位
    function limitMoney(obj) {
        obj.value = obj.value.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
        obj.value = obj.value.replace(/^\./g, ""); //验证第一个字符是数字
        obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个, 清除多余的
        obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
        obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
    }

    $("#moneyNum").blur(function() {
        var moneyEle = $api.byId('moneyNum');
        var moneyNum = moneyEle.value;
        var money = toDecimal2(moneyNum);
        $("#moneyNum").val(money);
    });

    function recharge() {
        var moneyEle = $api.byId('moneyNum');
        var moneyNum = moneyEle.value;
        if (!moneyNum) {
            // 充值金额不能为空
            $api.byId('checkRecharge').innerText = '充值金额不能为空';
            return false;
        } else {
            $api.byId('checkRecharge').innerText = '';
        }

        var gate = $("input[name='GateBusild']:checked").val();

        // var gate = $api.byId('GateBusild');
        if (gate == 'QP') {
            $("#hideBankName").val();
        } else {
            var hideBankName = $api.byId('hideBankName');
            var tep = $('#hideBankName').val();
            if (tep == '') {
                api.toast({
                    msg: '请选择银行!',
                    duration: 2000,
                    location: 'bottom'
                });
                return;
            }
        }

        // 提交表单
        var t = $('#rechargeForm');
        formArray = t.serializeArray();
        // console.log(JSON.stringify( formArray ));



        t.submit();
        api.toast({
            msg: '正在前往鄂托克农行存管系统...',
            duration: 2000,
            location: 'middle'
        });
    }



    function showBankList(option) {
        var banklist = $api.byId('hideBankList');
        if (option.selectedIndex == 1) {
            banklist.style.display = 'none';
        } else {
            banklist.style.display = 'block';
        }
    }

    // 打开银行列表
    function openBankList() {
        api.openWin({
            name: 'bank-list-2',
            url: './bank-list-2.html',
            pageParam: {
                name: 'test'
            }
        });
    }
</script>

</html>
